<template>
  <el-row :gutter="20" class="content-main tag">
    <el-col :span="6" v-for="(item, index) in typeList" :key="index">
      <nuxt-link class="flex-space type-item pointer" tag="div" to>
        {{item}}
        <span>2</span>
      </nuxt-link>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      typeList: [
        'HTML',
        'CSS',
        'CSS3',
        'HTML5',
        'JavaScript',
        'VueJS'
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.content-main {
  padding: 20px 10px 10px;

  .type-item {
    padding: 20px 20px;
    margin-bottom: 10px;
    border: 1px solid var(--theme);

    span {
      height: 16px;
      padding: 0 5px;
      background-color: var(--theme);
      border-radius: 16px;
      color: #fff;
    }
  }
}
</style>